<template>
      <!-- 应用概要 -->
 <div class="applicationSummary" >
     <div class="head" style="padding-left: 20px;">
            <el-row style="line-height: 50px;font-weight: 700;">应用概要</el-row>
     </div>
     <div class="content" style="text-align:center">
        <div class="contentBox" style="display:flex;flex-wrap:wrap">
            <div class="box"  v-for="(item,index) in summaryList" :key="index" style="width:25%">
            <p class="headTitle">{{ item.name }}</p>
            <p class="dataStyle">{{ item.data.toLocaleString() }}</p>
            <p v-show="index>0" class="headTitle">同比0.3%</p>
            </div>
        </div>
    </div>
      </div>
</template>
<script>
export default {
data(){
    return {
        summaryList:[
            {name:"累计用户数",data:343242},
            {name:"近7日总活跃用户数",data:343242},
            {name:"近30日总活跃用户数",data:343242},
            {name:"总错误率",data:343242},
            {name:"近7日平均活跃用户数",data:343242},
            {name:"近7日总活跃用户数",data:343242},
            {name:"近7日平均次日留存率",data:343242},
            {name:"近7日平均使用时长",data:343242}
        ]
    }
}
}
</script>

<style scoped>
.headTitle {
font-size: 14px;
color:#333;
}
.dataStyle {
font-size: 20px;
color:#333;

}
</style>